<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .container{
            width: 800px;
            height: 400px;
        }
    </style>
  </head>
  <body>
    <!-- 2. 准备一个具备宽高的DOM容器 -->
    <div class="container"></div>
    <!-- 1. 引入echarts -->
    <script src="./echarts.min.js"></script>
    <script type="text/javascript">
      //3 初始化echarts实力
      const myEcharts = echarts.init(document.querySelector('.container'))
      // 4. 定义option（图表的配置项）
      const option = {
        // 标题
        title: {
          // 标题的内容
          text: '柱形图',
          left: 'center',
        },
        // x轴
        xAxis: {
          // x轴要渲染的具体内容
          data: ['食品', '数码', '服饰', '箱包'],
        },
        // y轴
        yAxis: {
          // 显示坐标轴轴线
          axisLine: {
            show: true,
          },
          // 显示刻度线
          axisTick: {
            show: true,
          },
        },
        // 系列：放置要渲染的数据
        series: {
          type: 'bar', // 图表的类型
          data: [100, 120, 90, 150], // 图表的数据
        },
      }
      // 5. 渲染图表
      myEcharts.setOption(option)
    </script>
  </body>
</html>
